<template>
  <!-- 用了一个行列布局 -->
  <el-row type="flex" justify="space-between" align="middle" style="height:40px;width:100%">
    <el-col>
      <span>{{ data.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ data.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown @command="operateDepts">
            <span>
              操作<i class="el-icon-arrow-down" />
            </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">查看部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {
  props: {
    data: {
      type: Object, // 对象类型
      required: true // 要求对方使用您的组件的时候 必须传treeNode属性 如果不传 就会报错
    },
    isRoot: {
      type: Boolean
    }
  },
  methods: {
    operateDepts(command) {
      // 添加
      if (command === 'add') {
        console.log('add')
        console.log(this.data)
        // 那个部门被点击 这个data就代表这个部门
        // 点击时传出参数让添加对话框显示
        this.$emit('addDepts', this.data)
      }
      // 编辑
      if (command === 'edit') {
        console.log('edit')
        this.$emit('editDepts', this.data)
      }
      // 删除
      if (command === 'del') {
        this.$confirm('此操作将该部门删除, 是否继续?', '删除部门', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delDepartments(this.data.id).then(res => {
            console.log(res)
            this.$message.success('删除成功咯')
            this.$emit('delDepts')
          }).catch(() => {})
        }).catch(() => {})
      }
    }
  }
}
</script>

<style>

</style>
